<template>
	<div>
		<el-breadcrumb separator-class="el-icon-arrow-right">
		  	<el-breadcrumb-item :to="{ path: '/base' }">首页</el-breadcrumb-item>
		  	<el-breadcrumb-item>添加图片</el-breadcrumb-item>
		</el-breadcrumb>
		  	
		  	<el-upload
			  class="upload-demo"
			  drag
			  action="/api/base/allpicture"
			    :beforeUpload="beforeAvatarUpload"
			  multiple>
			  <i class="el-icon-upload"></i>
			  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
			  <div class="el-upload__tip" slot="tip">只能上传jpg文件，且不超过500kb</div>
			</el-upload>
		
	</div>
</template>

<script type="text/javascript">

	export default{
		data(){
			return{
				max:20,
				goods:{
					title:"",
					detailPic:[],
					selectAttrList:[],
				},
				cateList:[],
				selectAttrList:[],
			}
		},
		mounted () {
	      
	      
	    },
		created(){
			this.goods._token = window.axios.defaults.headers.common['X-CSRF-TOKEN'];
			this.getCates();

		},
		methods:{
			beforeAvatarUpload(file) {
    			console.log(file,9090);
				var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)				
				const extension = testmsg === 'jpg'
				const isLt2M = file.size / 1024 /1024 <=0.5
				console.log(testmsg,extension,isLt2M);
				if(!extension) {
					this.$message({
						message: '上传文件只能是 jpg格式!',
						type: 'warning'
					});
				}
				if(!isLt2M) {
					this.$message({
						message: '上传文件大小不能超过 500K!',
						type: 'warning'
					});
				}
				 return extension && isLt2M;
				
			},
		
			getCates()
			{
				axios.get('/api/cates')
					.then(result => {
						this.cateList = result.data.result;
					})
			},
			
			addPicture(){
				for(var i=0;i<this.selectAttrList.length;i++){
					this.goods.selectAttrList.push(JSON.parse(this.selectAttrList[i]));
				}
				axios.post('/api/goods/add',this.goods)
					.then(result => {
						console.log(result);
						this.goods.selectAttrList = [];
						this.$message({
		        			type:"success",
		        			message:"上传成功"
		        		})
		        		this.$router.push({ path: '/base'})
					})
					.catch(error => {

					})
			},
			
		  
		   
		    
		   
		   
		   
		 
		}
	}
</script>

<style type="text/css">
	input[type=file] {
	    display: none;
	}
</style>